<template>
	<view>
		<!-- 		<van-area
		  :area-list="areaList.name"
		  :columns-placeholder="['请选择', '请选择', '请选择']"
		  :columns-num="3"
		  :value="1"
		  title="标题"
		/> -->
		<view class="box">
			<view class="ipt">
				<van-cell-group>
					<van-field
						:value="form.connect_name"
						required
						clearable
						label="姓名"
						icon="question-o"
						placeholder="请输入姓名"
						bind:click-icon="onClickIcon"
						:border="false"
						@change="connect_name"
					/>

					<van-field :value="form.store" label="店名" placeholder="请输入店名" required :border="false" @change="store" />
					<van-field :value="form.connect_mobile" label="手机号" placeholder="请输入手机号" required :border="false" @change="connect_mobile" />
					<van-field :value="form.province" label="所在地区" placeholder="请选择所在的省市区、乡镇" required :border="false" disabled @click-input='cli' />
					<van-field :value="form.detail_address" label="详细地址" placeholder="请输入详细地址" required :border="false" @change="detail_address" />
				</van-cell-group>
			</view>
			<view class="set">
				<view class="">设置默认地址</view>
				<view class=""><van-switch active-color="#F5AC4F" size="20" :checked="checked" @change="onChange" /></view>
			</view>
			<uni-data-picker :localdata="items" placeholder="请选择所在的省市区、乡镇" popup-title="请选择地区" v-model="area" @change="bindPickerChange">
				<text class="word12" v-if="!area.length">请选择所在的省市区、乡镇</text>
				<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
			</uni-data-picker>

			<view class="btn" @click="preservation">保存</view>
			<view class="btn btn1" v-if="value">删除</view>
		</view>
	</view>
</template>

<script>
import conmon from '@/commonFun/conmon.js';
import citys from '@/static/city/city.js';
export default {
	data() {
		return {
			checked: true,
			value: null,
			form: {},
			areaList: [],
			area: [], // 选择地区内容
			address: {
				province: '',
				city: '',
				county: ''
			},
			items: citys.data // 选择地区内容
		};
	},
	onLoad(i) {
		console.log(i);
		uni.setNavigationBarTitle({
			title: i.value == 1 ? '编辑地址' : '添加新地址'
		});
		if (i.value == 1) {
			this.value = 1;
		}
		// this.area()
	},
	methods: {
		cli(){
			console.log(123);
		},
		bindPickerChange(val) {
			console.log(val);
			// 选择地区内容
			let area = val.detail.value;
			this.area = [area[0].text, area[1].text, area[2].text];
			this.address.province = area[0].value;
			this.address.city = area[1].value;
			this.address.county = area[2].value;
		},
		//联系人
		connect_name(e) {
			this.form.connect_name = e.detail;
		},
		//手机号码
		connect_mobile(e) {
			this.form.connect_mobile = e.detail;
		},
		// 店铺名
		store(e) {
			this.form.store = e.detail;
		},
		detail_address(e) {
			this.form.detail_address = e.detail;
		},
		preservation() {
			this.adddetail();
		},
		adddetail() {
			console.log(this.form, 'this.form.store');
			this.$request('/appapi/applet/address/adddetail', {
				connect_name: this.form.connect_name, //联系人
				connect_mobile: this.form.connect_mobile, //手机号码
				province: '', //省
				city: '', //市
				area: '', //区
				detail_address: this.form.detail_address, //详细地址
				is_default: this.form.is_default, //默认地址:0=否,1=是
				store: this.form.store //店名
			}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data);
				}
			});
		},
		onChange() {
			this.checked = !this.checked;
		}
	}
};
</script>

<style scoped lang="scss">
.box {
	padding: 20rpx;
	.btn1 {
		background-color: rgb(245, 245, 245) !important;
		border: 1px solid #f5ac4f;
		color: #f5ac4f !important;
	}
	.btn {
		background-color: #f5ac4f;
		color: #ffffff;
		border-radius: 20px;
		padding: 20rpx 0;
		text-align: center;
		// position: fixed;
		// bottom: 40rpx;
		font-size: 0.7rem;
		width: 95vw;
		margin-top: 20rpx;
	}
	.set {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		border-radius: 8px;
		font-size: 0.7rem;
	}
	.ipt {
		border-radius: 8px;
		overflow: hidden;
	}
}
</style>
